<template>
	<div>
		<Head></Head>
		<img src="https://image1.guazistatic.com/qn190708145756a53adb9837b3e25e7d2551c9e3beeae0.png" alt="">
		<div class="mains">
		<el-form
			ref="form"
			label-width="5rem"
			class="demo-border"
			style="padding:5px"
			>
			<el-form-item label="车标题" prop="name">
				<el-input v-model="Form.name" placeholder="奥迪A3 2019款 Sportback 35 TFSI 进取型 国VI "></el-input>
			</el-form-item>
			<el-form-item label="车架号" prop="VIN">
				<el-input v-model="Form.VIN" placeholder="车辆VIN（不会对外公开）"></el-input>
			</el-form-item>
			<el-row>
				<el-col :span="12">
					<el-form-item label="地区" prop="VIN">
						<el-input v-model="Form.region" placeholder="地区"></el-input>
					</el-form-item>
				</el-col >
				<el-col :span="12">
					<el-form-item label="上牌时间" prop="VIN">
						<el-input v-model="Form.date" placeholder="2022年"></el-input>
					</el-form-item>
				</el-col>
			</el-row>
			<el-form-item label="基本信息" prop="desc" >
				<el-input type="textarea" v-model="Form.desc" :placeholder="text_base" rows="5">
				</el-input>
			</el-form-item>
			<el-form-item label="损坏程度" prop="desc" >
				<el-input type="textarea" v-model="Form.desc" :placeholder="text_hurt" rows="5">
				</el-input>
			</el-form-item>
			<el-form-item>
				<el-switch
					v-model="Form.public"
					active-color="#13ce66"
					inactive-color="#ff4949"
					active-text="对外公开">
				</el-switch>
			</el-form-item>

			<el-form-item style="margin-bottom:50px;">
				<el-button type="primary" v-on:click.native="submitForm">立即创建</el-button>
				<el-button v-on:click.native="resetForm">重置</el-button>
			</el-form-item>
			</el-form>
		</div>
	</div>

</template>

<script>
	// @ is an alias to /src
	import Head from "@/components/Head.vue"
		export default {
			name: 'Information',
			components: {
				Head
			},
		data() {
			return {
				Form:{public:true,region:[]},
				text_base:"上牌时间：2019年09月\n表显里程：3.77万公里\n变速箱：自动\n排放标准：国VI\n排量：1.4L\n发布时间：2022-11-08\n出险查询：出险时间、理赔金额、出险部位\n年检到期：2023-09\n保险到期：2023-09",
				text_hurt:'',
			}
		},

		methods: {
			submitForm(){
				if(this.Form.name&&this.Form.VIN){
					this.$message({
						message: `已超过提交，待审核后公布`,
						type: 'success'
					});
				} else {
					this.$message({
						message: `请填写详细`,
						type: 'warning'
					});
					return;
				}
			}
		}

	}
</script>

<style>

	
.btn {
		background: #38b44c;
		font-size: 1rem;
		height: 2.8125rem;
		width: 100%;
		border-radius: 0.125rem;
	}

	.mains {
		padding: 0 .5rem;
	}

	.mains li {
		align-items: center;
		display: flex;
		justify-content: space-between;
		line-height: 3.5rem;
		font-size: 1rem;
		color: #495056;
		border-bottom: 0.03125rem solid #edeff3;
	}

	.mains li i {
		color: #cacdd0;

	}

	.mains-b {
		margin-top: 3.125rem;
	}

	.mains-b span {
		height: 2.25rem;
		line-height: 2.25rem;
		color: #303741;
		font-weight: 300;
		font-size: 0.8125rem;
		width: 100%;
		text-align: center;
		display: block;
	}
</style>
